<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>商城首页</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
   
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">
<style type="text/css">
		

/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    /* 底部留白 */
    display: block;
	border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    font-size: 100%;
    font-weight: normal;
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    outline: none;
    border:none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #666;
}

a:hover {
    color:#DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
		
		
		
		
		
		
		
		
		
		
.container {
    width: 1200px;
    margin: 0 auto;
}

/* #region导航栏顶部start */
.topbar {
    height: 30px;
    background-color: #ECECEC;
}

.welcome,
.nav {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666666;
}

.welcome span,
.welcome a {
    font-size: 12px;
}

.welcome .hello {
    margin-right: 28px;
}

.welcome .login {
    padding-right: 10px;
    border-right: 1px solid #666666;
}

.welcome .register {
    padding-left: 10px;
}

.nav .meau {
    font-size: 12px;
}

.meau li {
    float: left;
    padding-left: 10px;

}

.meau a {
    border-right: 1px solid #666666;
    padding-right: 10px;
}

.meau li:first-child a {
    padding-left: 0;
}

.meau li:last-child a {
    border: 0;
}

/*#endregion 导航栏底部 end */


/* #region 头部 */
.header {
    height: 120px;
    background-color: skyblue
}

.search form {
    font-size: 0;
    margin-top: 42px;
}

.search form input {
    width: 508px;
    height: 34px;
    border: 1px solid #DD302D;
}

.search form button {
    width: 78px;
    height: 34px;
    border: 1px solid #DD302D;
    vertical-align: top;
    background-image: url(../images/serch_icon.png);
    background-repeat: no-repeat;
    background-color: #DD302D;
    background-position: 28px 6px;
}

/* #endregion 头部结束 */

/* #region 主导航区 */
.main-nav {
    height: 47px;
    border-bottom: 1px solid #DD302D;
}

.main-nav .box {
    width: 190px;
    height: 47px;
    font-size: 12px;
    background-color: #DD302D;
    color: white;
    text-align: center;
    line-height: 47px;

}

.main-nav .nav-list li {
    float: left;
    margin: 0 10px;
    line-height: 47px;
    font-weight: bold;
}

/* #endregion 主导航区 */

/* #region 侧导航 */
.slid-nav {
    margin-top: 10px;
}

.slid-nav .left-nav {
    width: 190px;
    height: 448px;
    background-color: #f4f4f4;
}

.left-nav ul li {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    /* padding有背景颜色，margin没有背景颜色 */
    padding-left: 10px;
}

.left-nav ul li:hover {
    background-color: #DD302D;
}

/* a标签有自己独有的样式，用li的无法继承，所以得重新设置 */
.left-nav ul li>a:hover {
    color: white;
}

.slid-nav .second-meau {
    width: 700px;
    height: 448px;
    background-color: white;
    display: none;
}

.left-nav ul li:hover .second-meau {
    display: block;
}

.slid-nav .left-nav {
    position: relative;
}

.slid-nav .second-meau {
    position: absolute;
    top: 0;
    left: 160px;
    padding-left: 20px;
}

.second-meau dl {
    margin-top: 15px;
}

.second-meau dd,
.second-meau dt {
    height: 20px;
    float: left;
    line-height: 20px;
    padding-right: 10px;

}

.second-meau dd a {
    padding-left: 10px;
    border-left: 1px solid black;
}

.second-meau dt {
    width: 70px;
    font-weight: bold;

}

/* #endregion 侧导航 */
/*#region中间轮播图区 */
.slid-nav .banner {
    background-color: aqua;
    width: 680px;
    height: 448px;
    margin: 0 10px;
}
.banner {
	position:relative;
}
.banner img {
    width: 680px;
    height: 448px;
}

/* #endregion中间轮播图区 */
/* #region右侧区域 */
.slid-nav .other {

    width: 290px;
    height: 448px;
}

.slid-nav .other .message {
    width: 260px;
    height: 151px;
    /* margin-left: 20px; */
    padding: 0 14px;
    border: 1px solid black;
}

.message .information {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid black;

}

.other .line-list li {
    height: 26px;
    line-height: 26px;
}

.message .title {
    font-size: 14px;
}

.message a {
    font-size: 12px;
}

.iconlist {
    margin-top: 10px;
    width: 290px;
    height: 290px;
    /* margin-left: 20px; */
    background-color: gray;
    overflow: hidden;
}

.other-nav-list li {
    width: 48px;
    height: 70px;
    background-color: skyblue;
    float: left;
    margin: 0 11px;
    text-align: center;
}

.other-nav-list li:first-child {
    margin-left: 16px;
}

.other-nav-list:first-child {
    margin-top: 16px;
}

.other-nav-list:nth-child(2) {
    margin: 17px 0;
}

.other-nav-list .picture {
    width: 48px;
    height: 48px;
    background-image: url(../images/精灵图-侧边功能.png);

}

.other-nav-list:nth-child(1) li:nth-child(1) .picture {
    background-position: 0 0;
}

.other-nav-list:nth-child(1) li:nth-child(2) .picture {
    background-position: -48px 0;
}

.other-nav-list:nth-child(1) li:nth-child(3) .picture {
    background-position: -96px 0;
}

.other-nav-list:nth-child(1) li:nth-child(4) .picture {
    background-position: -144px 0;
}


.other-nav-list:nth-child(2) li:nth-child(1) .picture {
    background-position: 0 -48px;
}

.other-nav-list:nth-child(2) li:nth-child(2) .picture {
    background-position: -48px -48px;
}

.other-nav-list:nth-child(2) li:nth-child(3) .picture {
    background-position: -96px -48px;
}

.other-nav-list:nth-child(2) li:nth-child(4) .picture {
    background-position: -144px -48px;
}

.other-nav-list:nth-child(3) li:nth-child(1) .picture {
    background-position: 0 -96px;
}

.other-nav-list:nth-child(3) li:nth-child(2) .picture {
    background-position: -48px -96px;
}

.other-nav-list:nth-child(3) li:nth-child(3) .picture {
    background-position: -96px -96px;
}

.other-nav-list:nth-child(3) li:nth-child(4) .picture {
    background-position: -144px -96px;
}

/* #endregion右侧区域*/

/* #region秒杀区域 */
.seckll img {
    float: left;
    margin-right: 9px;
    margin-top: 10px;
    cursor: pointer;
}

.seckll img:last-child {
    margin-right: 0;
}

 
/* #endregion秒杀区域 */
/* #region下部区域 */
.toptitle span {
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
}

.toptitle ul li {
    float: left;
    margin-top: 30px;
}

.toptitle ul li a {
    font-size: 16px;
    padding: 0 10px;
    border-right: 1px solid black;
}

.toptitle ul li:last-child a {
    border: 0;
}

.toptitle ul li:first-child a {
    padding-left: 0;
}

.toptitle {
    height: 60px;
    padding-bottom: 4px;
    border-bottom: 2px solid red;

}

.floor-into .item {
    float: left;
}

.floor-into .item1 {
    width: 190px;
    height: 392px;
    background-color: #f4f4f4;
    padding: 20px;
}

.item1-list li {
    width: 90px;
    height: 22px;
    padding-bottom: 3.4px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    text-align: center;
}

.item1-list {
    margin-bottom: 29px;
}

.item1-list li:nth-child(2n-1) {
    float: left;
}

.item1-list li:nth-child(2n) {
    float: right;
}

.item1-list li:nth-child(3),
.item1-list li:nth-child(4) {
    margin: 14.4px 0;
}

.floor-into .item2 {
    width: 340px;
    height: 432px;
    background-color: greenyellow;
}

.floor-into .item3 {
    width: 206px;
    height: 432px;
    background-color: orange;
    border-right: 1px solid #e2e2e2;
}

.floor-into .item3 img,
.floor-into .item4 img,
.floor-into .item5 img {
    border-bottom: 2px solid #e2e2e2;
}

.floor-into .item4 {
    width: 206px;
    height: 432px;
    background-color: gray;
    border-right: 1px solid #e2e2e2;
}

.floor-into .item5 {
    width: 206px;
    height: 432px;
    background-color: rgb(22, 172, 127);
}

/* 
#endregion下部区域 */
/* #region页脚区域 */
.footer {
    height: 440px;
    background-color: #483e3e;
}

.footer .link ul {
    float: left;
    margin-top: 48px;
    width: 190px;
    height: 176px;
    margin-right: 10px;
    font-size: 14px;
}

.link-list:last-child {
    margin-right: 0;
}

.footer .link ul a {
    color: white;
}

.line {
    margin-top: 12px;
    height: 2px;
    background-color: #584d4d;
}

.bottom-list li {
    margin-top: 30px;
    float: left;
}

.bottom-links {
    text-align: center;
}

.bottom-list {
    display: inline-block;
}

.bottom-list li a {
    padding: 0 26px;
    color: white;
    font-size: 12px;
    border-right: 1px solid white;
}

.bottom-list li:last-child a {
    padding-right: 0;
    border: 0;
}

.bottom-list li:first-child a {
    padding-left: 0;
}

.end {
    margin-top: 20px;
    color: white;
}

/* #endregion页脚区域 */
.xuanfu{
background-color:gray;
opacity:0.5;
color:white;
text-align:center;
display:none;
font-size:20px

}
.seckll .tupian{
	width:230px;
	height:190px;
	
}
.righttu{
width:291px;
height:363px;
}
.logo .newlogo{
width:180px;
height:50px;
margin-top:35px;
margin-left:20px;}
 a:hover .xuanfu{
	display:block;
}

 .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      position:absolute;
      bottom:15px;
      left:280px;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
    .prev{
    position:absolute;
    left:0px;
    top:220px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.4);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      font-weight:bold;
    }
    
    .next {
    position:absolute;
    right:0px;
    top:220px;
    width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.4);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      font-weight:bold;
    }
   .container{
position:relative;
}

.daojishi {
	width:130px;
	height:40px;
	position:absolute;
	top:135px;
	left:50px;
}
.daojishi .shi,.daojishi .fen,.daojishi .miao{
	width:40px;
	height:30px;
	color:white;
	background-color:black;
	font-size:18px;
}

.daojishi i{
	color:white;
	font-size:18px;
	font-weight:bold;
}
    
	</style>
  </head>
  
  <body>
 
    
      <!-- 顶部导航条 -->
    <div class="topbar">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左侧欢迎区 -->
            <div class="welcome leftfix">
                <span class="hello">小🦌商城欢迎您</span>
                
                <%	String userid = (String)request.getSession().getAttribute("userid"); 
                	String value;
                	if (userid==null){
                		 value = "请登录";
                	}else{
                		 value = "已登录";
                	}%>
                <a href="/works/session/login.jsp" class="login"><%=value %></a>
                <a href="/works/session/login.jsp" class="register">免费注册</a>
            </div>
            <!-- 右侧导航区 -->
            <div class="nav rightfix">
                <ul class="meau">
                    <li><a href="./mycenter.html">个人中心</a></li>
                    <li><a href="/works/session/goshop.jsp">我的购物车</a></li>
                    <li><a href="#">我的关注</a></li>
                    <li><a href="#">商城会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">新品推荐</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部导航条结束 -->
    <!-- 头部区域 -->
    <div class="header">
        <div class="container clearfix">
            <!-- log区域 -->
            <div class="logo leftfix">
                <img class="newlogo" src="./images/newlogo.png" alt="尚品汇">
            </div>
            <!-- 搜索区域 -->
            <div class="search rightfix">
                <form action="#">
                    <input type="text">
                    <button>搜索</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 头部区域结束 -->
    <!-- 主导航区域 -->
    <div class="main-nav">
        <div class="container clearfix">
            <div class="box leftfix">全部商品分类</div>
            <div class="nav-list leftfix clearfix">
                <ul>
                    <li><a>商品超市</a></li>
                    <li><a>优惠卷</a></li>
                    <li><a>买啥</a></li>
                    <li><a>商品家电</a></li>
                    <li><a>商品生鲜</a></li>
                    <li><a>PLUS会员</a></li>
                    <li><a>进口好物</a></li>
                    <li><a>品牌闪购</a></li>
                    <li><a>拍卖</a></li>
                    <li><a>五金店</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 左侧导航 -->
    <div class="slid-nav">
        <div class="container clearfix">
            <div class="left-nav leftfix">
                <ul>
                    <li><a href="#">手机\运营商\数码</a>
                        <div class="second-meau">
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">手机\运营商\笔记本</a>
                        <div class="second-meau">
                            <dl class="clearfix">
                                <dt><a href="#">电子刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\电视机</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\蓝牙耳机</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\冰箱</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\保温杯</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                    <li><a href="#">手机\运营商\数码</a></li>
                </ul>
            </div>
            <!-- 左侧导航结束 -->
            <!-- 中间内容区 -->
            <div class="banner leftfix">
                <a href="#"><img src="./images/banner主图.png" alt=""></a>
                <ul class="slider-indicator">
		        <li class="active"></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        
		      </ul>
		      <div class="toggle">
		        <button class="prev">&lt;</button>
		        <button class="next">&gt;</button>
		      </div>
            </div>
             <script>
             var data = [
						   { url: "./images/banner主图.png"},
                           { url: "./images/main2.jpg"},
                           { url: "./images/main3.jpg"},
                           { url: "./images/main4.jpg"},
                           { url: "./images/main5.jpg"},
                           { url: "./images/main6.jpg"},
                           
                         ]
             
             
             var btn1 = document.querySelector(".next")
             var btn2 = document.querySelector(".prev")
             var img = document.querySelector(".banner img")
             var p = document.querySelector("p")
             var footer = document.querySelector(".slider-footer")
             var i = 0
             function commen() {
            	 img.src = data[i].url 
                 var bianhua = document.querySelector(".slider-indicator li.active")
                 bianhua.classList.remove("active")
                 var bvbv = document.querySelectorAll(".slider-indicator li")
                 bvbv[i].classList.add("active")
                 
               }
             btn1.addEventListener("click", function () {
               // next.addEventListener('click', function () {
               console.log(data[i])
               i++
               i = i >= data.length? 0 : i
               commen()
             })
              btn2.addEventListener("click", function () {
			      console.log(data[i])
			      i--
			      i = i < 0 ? data.length - 1 : i
			      commen()
			    })
            
				
               var timerId = setInterval(function () {
                 btn1.click()
               }, 2000)
                //鼠标经过大盒子，停止定时器
			   var slider = document.querySelector(".banner")
			    slider.addEventListener("mouseenter", function () {
			      clearInterval(timerId)
			    })
			    //鼠标离开，开启定时器
			    slider.addEventListener("mouseleave", function () {
			      clearInterval(timerId)
			      timerId = setInterval(function () {
			        btn1.click()
			      }, 2000)
			    })
			    commen();
             </script>
            <!-- 中间内容区结束 -->
            <!-- 右侧链接区 -->
            <div class="other leftfix">
                <div class="message ">
                    <div class="information clearfix">
                        <span class="title leftfix">尚品快报</span>
                        <a href="#" class="more rightfix">更多&nbsp;&gt;</a>
                    </div>
                    <ul class="line-list">
                        <li><a>[特惠] 毛衣加直筒裤才是YYDS</a></li>
                        <li><a>[特惠] 毛衣加直筒裤才是YYDS</a></li>
                        <li><a>[特惠] 毛衣加直筒裤才是YYDS</a></li>
                        <li><a>[特惠] 毛衣加直筒裤才是YYDS</a></li>
                    </ul>
                </div>
                <div class="iconlist">
                   	<img class="righttu" src="./images/right.png" >
                </div>
            </div>
            <!-- 右侧链接区结束 -->
        </div>
    </div>
    <!-- 秒杀区域 -->
    <div class="seckll">
        <div class="container clearfix">
            <img src="./images/seckill.png" alt="">
            <img src="./images/banner1.png" alt="">
            <img src="./images/banner2.png" alt="">
            <img src="./images/banner3.png" alt="">
            <img class="tupian" src="./images/banner4.png" alt="">
            <div class="daojishi">
            	<span class="shi"></span>
            	<i>:</i>
            	<span class="fen"></span>
            	<i>:</i>
            	<span class="miao"></span>
            </div>
            <script>
            function mytime(){
            //现在的时间戳
            	var now = +new Date();
            //将来的时间戳
            	var last = +new Date("2024-05-06 18:30:00")
            //剩余的时间戳 将毫秒转换为秒 /1000
            	var count = (last - now)/1000;
            	//var dd = parseInt(cout/60/60/24) 转换为多少天
            	var h = parseInt(count/60/60%24);
            	h = h<10 ? "0"+h:h
            	var m = parseInt(count/60%60);
            	m = m<10 ? "0"+m:m
            	var s = parseInt(count%60)
            	s = s<10 ? "0"+s:s
            	document.querySelector(".shi").innerHTML = h;
            	document.querySelector(".fen").innerHTML = m;
            	document.querySelector(".miao").innerHTML = s;
            }
            //页面加载就开始调用，避免出现短暂初始值
            mytime();
            //setInterval里面的函数不需要带括号
            setInterval(mytime,1000)
            	
            </script>
        </div>
    </div>
    <!-- 下部商品区域 -->
    <div class="middle">
        <div class="container">
            <div class="toptitle clearfix">
                <span class="leftfix">家用电器</span>
                <ul class="element rightfix">
                    <li><a href="">热门</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">应季电器</a></li>
                    <li><a href="#">空气/净水</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
            <div class="floor-into clearfix">
                <div class="item item1">
                    <ul class="item1-list clearfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">节能补贴</a></li>
                    </ul>
                    
                 <img src="./images/编组.png" alt=""><div class="xuanfu">加入购物车</div>>
                </div>
                <div class="item item2">
                    <a href="/works/session/look.jsp?id=1"><img src="./images/appliance_banner07.png" alt=""><div class="xuanfu">查看商品详情</div>
                </div>
                <div class="item item3">
                    <a href="/works/session/look.jsp?id=2"><img src="./images/微波炉.png" alt=""><div class="xuanfu">查看商品详情</div></a>
                     <a href="/works/session/look.jsp?id=3"><img src="./images/空气炸锅.png" alt=""><div class="xuanfu">查看商品详情</div></a>
                </div>
                <div class="item item4">
                     <a href="/works/session/look.jsp?id=4"><img src="./images/冰箱.png" alt=""><div class="xuanfu">查看商品详情</div></a>
                </div>
                <div class="item item5">
                     <a href="/works/session/look.jsp?id=5"><img src="./images/电饭煲.png" alt=""><div class="xuanfu">查看商品详情</div></a>
                     <a href="/works/session/look.jsp?id=6"><img src="./images/电饭煲2.png" alt=""><div class="xuanfu">查看商品详情</div></a>
               
                </div>
            </div>

        </div>
    </div>
    <!-- 分割线 -->
    <div class="footer">
        <div class="container">
            <div class="link clearfix">
                <ul class="link-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">购物流程</a></li>
                </ul>
            </div>
            <!-- 分割线 -->
            <div class="line"></div>
            <div class="bottom-links">
                <ul class="bottom-list clearfix">
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">销售链接</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">合作方式</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
                <div class="end">京PC备1223343543543543</div>
            </div>
        </div>
    </div>
     
  </body>
</html>
